let code = {};

code.base = `
<div slot="demo">
<Card style="width:400px">
<p slot="title">
  <Icon type="social-buffer"></Icon>
  替代文字标题
</p>
<a href="#" slot="extra" @click.prevent="changeLimit">
  <Icon type="ios-loop-strong"></Icon>
</a>
<div class="carddemo">
  <div class="item">
	<div class="iconwrap">
	  <Icon size="24" color="#1875F0" type="all-user"></Icon>
	</div>
	<div class="iteminfo">
	  <h1>{{usercount}}</h1>
	  <div class="proname">
		总用户
	  </div>
	</div>
  </div>
  <div class="item">
	<div class="iconwrap">
	  <Icon size="24" color="#5553CE" type="money"></Icon>
	</div>
	<div class="iteminfo">
	  <h1>{{income}}</h1>
	  <div class="proname">
		收入额
	  </div>
	</div>
  </div>
</div>
</Card>
<Card style="width:400px">
<p slot="title">
  <Icon type="social-buffer"></Icon>
  替代文字标题
</p>
<a href="#" slot="extra" @click.prevent="changeLimit">
  <Icon type="ios-loop-strong"></Icon>
</a>
<div class="carddemo complex">
  <div class="item">
	<div class="iconwrap">
	  <Icon size="24" type="person-birth"></Icon>
	</div>
	<div class="iteminfo">
	  <h1>1993年8月22日</h1>
	  <div class="proname">
		生日
	  </div>
	</div>
  </div>
  <div class="item">
	<div class="iconwrap">
	  <Icon size="24" color="#f63930" type="love"></Icon>
	</div>
	<div class="iteminfo">
	  <h1>有对象</h1>
	  <div class="proname">
		个人情感关系状况
	  </div>
	</div>
  </div>
  <div class="item">
	<div class="iconwrap">
	  <Icon size="24" color="#166aee" type="university"></Icon>
	</div>
	<div class="iteminfo">
	  <h1>大学本科</h1>
	  <div class="proname">
		学历
	  </div>
	</div>
  </div>
  
  <div class="item">
	<div class="iconwrap">
	  <Icon size="24" color="#9407ff" type="sex"></Icon>
	</div>
	<div class="iteminfo">
	  <h1>女</h1>
	  <div class="proname">
		性别
	  </div>
	</div>
  </div>
</div>
`;

code.bordered = `
<template>
<div slot="demo">
  <div style="background:#eee;padding: 20px">
	<Card :bordered="false" title="替代文字标题" icon="social-buffer">
	  <a href="#" slot="extra" @click.prevent="changeLimit">
		<Icon type="ios-loop-strong"></Icon>
	  </a>
	  <div class="carddemo">
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#1875F0" type="all-user"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{usercount}}</h1>
			<div class="proname">
			  总用户
			</div>
		  </div>
		</div>
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#5553CE" type="money"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{income}}</h1>
			<div class="proname">
			  收入额
			</div>
		  </div>
		</div>
	  </div>
	</Card>
  </div>
</div>
</template>
<script>
    export default {
        
    }
</script>
`;

code.disHover = `
<template>
<div slot="demo">
  <Row>
	<Col span="24">
	<Card>
	  <p slot="title">The standard card</p>
	  <a href="#" slot="extra" @click.prevent="changeLimit">
		<Icon type="ios-loop-strong"></Icon>
	  </a>
	  <div class="carddemo">
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#1875F0" type="all-user"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{usercount}}</h1>
			<div class="proname">
			  总用户
			</div>
		  </div>
		</div>
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#5553CE" type="money"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{income}}</h1>
			<div class="proname">
			  收入额
			</div>
		  </div>
		</div>
	  </div>
	</Card>
	</Col>
	<Col span="24">
	<Card dis-hover>
	  <p slot="title">Disable card with hover shadows</p>
	  <a href="#" slot="extra" @click.prevent="changeLimit">
		<Icon type="ios-loop-strong"></Icon>
	  </a>
	  <div class="carddemo">
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#1875F0" type="all-user"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{usercount}}</h1>
			<div class="proname">
			  总用户
			</div>
		  </div>
		</div>
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#5553CE" type="money"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{income}}</h1>
			<div class="proname">
			  收入额
			</div>
		  </div>
		</div>
	  </div>
	</Card>
	</Col>
  </Row>
</div>
</template>
<script>
    export default {
        
    }
</script>
`;

code.shadow = `
<template>
<div slot="demo">
  <Row style="background:#eee;padding:20px">
	<Col span="24">
	<Card :bordered="false">

	  <p slot="title">Borderless card</p>
	  <a href="#" slot="extra" @click.prevent="changeLimit">
		<Icon type="ios-loop-strong"></Icon>
	  </a>
	  <div class="carddemo">
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#1875F0" type="all-user"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{usercount}}</h1>
			<div class="proname">
			  总用户
			</div>
		  </div>
		</div>
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#5553CE" type="money"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{income}}</h1>
			<div class="proname">
			  收入额
			</div>
		  </div>
		</div>
	  </div>
	</Card>
	</Col>
	<Col span="24">
	<Card shadow>
	  <p slot="title">Use a card with a shadow effect</p>
	  <a href="#" slot="extra" @click.prevent="changeLimit">
		<Icon type="ios-loop-strong"></Icon>
	  </a>
	  <div class="carddemo">
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#1875F0" type="all-user"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{usercount}}</h1>
			<div class="proname">
			  总用户
			</div>
		  </div>
		</div>
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#5553CE" type="money"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{income}}</h1>
			<div class="proname">
			  收入额
			</div>
		  </div>
		</div>
	  </div>
	</Card>
	</Col>
  </Row>
</div>
</template>
<script>
    export default {
        
    }
</script>
`;

code.simple = `
<template>
<div slot="demo">
  <Card style="width:320px;">
	<div style="text-align:center">
	  <div class="carddemo simpledemo">
		<div class="item">
		  <div class="iconwrap">
			<Icon size="24" color="#fff" type="all-user"></Icon>
		  </div>
		  <div class="iteminfo">
			<h1>{{usercount}}</h1>
			<div class="proname">
			  总用户
			</div>
		  </div>
		</div>
		<div class="item">
		  <ul class="bar">
			<li v-for="item in barlist" :style="{height:item+'%'}"></li>
		  </ul>
		</div>
	  </div>
	</div>
  </Card>
</div>
</template>
<script>
	export default {
	data() {
	return {
	usercount:2234,
	}
	}, 
	}
</script>
`;

export default code;
